<template>
  <div>
    <!-- 导航 -->
    <van-nav-bar
      title="科室选择"
      left-arrow
      @click-left="onClickLeft"
      :fixed="true"
      :placeholder="true"
    />
    <div class="content">
      <!-- 侧边导航 -->
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          :title="item.ksname"
          v-for="item in DepartmentsName"
          :key="item.ksid"
          @click="chooseDep(item.ksid)"
        />
      </van-sidebar>
      <ul>
        <li
          v-for="(item, index) in DepartmentsAllName"
          :key="index"
          @click="goToDoctorList"
          class="departmentsallName-li"
        >
          {{ item.ksname }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getDepartmentsAllNameApi, getDepartments } from "../../../utils/api";
//
export default {
  data() {
    return {
      activeKey: 0,
      DepartmentsName: [],
      DepartmentsAllName: [],
      depId: "",
      ksname: "",
      ksid: "",
    };
  },
  mounted() {
    this.getDepartments();
    this.getDepartmentsAllName("01");
  },
  methods: {
    // 导航返回按钮事件
    onClickLeft() {
      this.$router.go(-1);
    },
    //获取科室列表
    async getDepartments() {
      const res = await getDepartments();
      this.DepartmentsName = res.result;
    },
    //点击获取ksid
    chooseDep(id) {
      this.depId = id;
      this.getDepartmentsAllName(this.depId);
    },
    // 获取科室详情列表
    async getDepartmentsAllName(id) {
      const res = await getDepartmentsAllNameApi({ ksid: id });
      this.ksid = id;
      let ress = res.result;
      // console.log(ress);
      this.DepartmentsAllName = ress[0].ksdetail;
    },
    //科室详情点击
    goToDoctorList() {
      this.$router.push("/doctorList/" + this.ksid);
      // let li= document.querySelector(".departmentsallName-li")
      // console.log(li.parentNode.parentNode);
    },
  },
};
</script>
<style lang="less" scoped>
.content {
  display: flex;
  .van-sidebar {
    width: 48%;
    .van-sidebar-item {
      font-size: 16px !important;
    }
  }
  ul {
    li {
      height: 59px;
      line-height: 59px;
      font-size: 16px;
      margin-left: 20px;
    }
  }
}
</style>
